<!--
 * @Author: panda-hbd 10254515+panda-hbd@user.noreply.gitee.com
 * @Date: 2022-11-13 10:59:08
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-16 10:58:14
 * @FilePath: \text-online-system\src\components\StudentInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="LeftSide">
        <div class="photo">
            <img src="../assets/logo.png" alt="">
        </div>
        <p>蔡徐坤</p>
        <div>
            <ul class="nav">
            <li @click="toPersonalCenter" :class="activeLi=='person'?'activeLi':''"><el-icon><User /></el-icon>个人中心</li>
            <li @click="toCourseInfo" :class="activeLi=='course'?'activeLi':''"><el-icon><Collection /></el-icon>我的课程</li>
        </ul>
        </div>
        <el-button type="success" plain>退出登录</el-button>
    </div>
</template>

<script>
export default {
    name: 'StudentInfo',

    data() {
        return {
           activeLi:'person'
        };
    },

    mounted() {
        
    },

    methods: {
        toPersonalCenter(){
            this.$router.push('/index/personalCenter')
            this.activeLi='person'
        },
        toCourseInfo(){
            this.$router.push('/index/courseInfo')
            this.activeLi='course'
        }

    },
};
</script>

<style scoped>
.LeftSide{
    text-align: center;
    color: var(--balckColor);
}
.photo{
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    margin: 0 auto;
}
.photo img{
    width: 100%;
    height: 100%;
}
p{
    margin: 1rem auto;
}

.nav li{
    padding: 0.5rem;
}
.activeLi{
    background-color:var(--greenColor3);
}

.el-button{
    margin: 0.8rem;
}
.el-icon{
    margin-right: 0.3rem;
}
</style>